<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <div class="container"></div>
  <p class="label"></p>
  <script>
    // 根据指定的图片路径，创建一个img元素
    // 该函数需要返回一个Promise，当图片加载完成后，任务完成，若图片加载失败，任务失败
    // 任务完成后，需要提供的数据是图片DOM元素；任务失败时，需要提供失败的原因
    // 提示：img元素有两个事件，load事件会在图像加载完成时触发，error事件会在图像加载失败时触发
    function createImage(imgUrl) {
      return new Promise((resolve, reject) => {
        const img = document.createElement("img")
        img.src = imgUrl
        img.onload = function () {
          resolve(img)
        }
        img.onerror = function (e) {
          console.log(e);
          reject(new Error(`Failed to load image at ${imgUrl}`));
        }
      })
    }

    // 使用createImage函数创建一个图像，图像路径自行定义
    // 当图像成功加载后，将图像宽高显示在p元素中，当图像加载失败后，输出加载失败的原因
    const imgUrl = "https://ts3.tc.mm.bing.net/th/id/OIP-C.IuNuzsR9jKSqu2-VTCmNOAHaE8?rs=1&pid=ImgDetMain&o=7&rm=3"
    createImage(imgUrl)
      .then(img => {
        const p = document.querySelector(".label")
        p.innerText = `图片尺寸: ${img.width} x${img.height}`
      })
      .catch(reason => {
        console.log(reason);
      })

    // 使用createImage函数创建一个图像，图像路径自行定义
    // 当图像成功加载后，将图像元素加入到container容器中，当图像加载失败后，输出加载失败的原因
    createImage("https://picsum.photos/seed/example2/400/300.jpg")
      .then(img => {
        const container = document.querySelector(".container");
        container.appendChild(img);
      })
      .catch(error => {
        console.error("图片加载失败:", error.message);
      });
  </script>
</body>

</html>